<template>
  <div class="main-config-box">
    <UploadImgs
      @uploadOnChange="rangUploadOnChange"
      :renderList="renderList"
      :limit="5"
    />
    <el-button
      style="width: 80px; margin-top: 20px"
      type="primary"
      size="small"
      @click="onOk"
    >
      确定配置
    </el-button>
  </div>
</template>

<script>
import UploadImgs from "../system/equipment/UploadImgs.vue";
import { addPics, getConfigPics } from "@/api/main-config.js";

export default {
  name: "mainConfig",
  components: {
    UploadImgs,
  },
  data() {
    return {
      renderList: [],
    };
  },
  async created() {
    const res = await getConfigPics({});
    console.log(res);
    const { data } = res;
    const { imageItemVOList } = data;
    if (Array.isArray(imageItemVOList) && imageItemVOList.length) {
      this.renderList = imageItemVOList.map((item) => {
        return {
          ...item,
          picUrl: item.url,
          status: "success",
        };
      });
      console.log(this.renderList);
    }
  },
  methods: {
    onOk() {
      const par = {
        imageItemVOList: this.renderList.map((item) => {
          return {
            ...item,
            name: item.name,
            url: item.picUrl,
          };
        }),
      };
      addPics(par).then((res) => {
        this.$message.success("配置成功！");
      });
    },
    rangUploadOnChange(data) {
      this.renderList = data.map((item) => {
        if (item.status === "success") {
          return item;
        }
        return {};
      });
    },
  },
};
</script>
<style scoped lang="scss"></style>
